Dashboard Temp Share Shortlinks Frames API

HTMLify

index.html
Views: 327 | Author: cody 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Changing Background Gradient Animation</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.1/gsap.min.js"
        integrity="sha512-qF6akR/fsZAB4Co1QDDnUXWnaQseLGXoniuSuSlPQK6+aWhlMZcHzkasCSlnWoe+TJuudlka1/IQ01Dnhgq95g=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

<body>
    <div class="container">
        <div class="switch">
            <div class="toggle-button">
                <div class="toggle"></div>
                <div class="moon-mask"></div>
                <div class="circles-wrapper">
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                </div>
            </div>
        </div>

        <div class="text">
            <p>n</p>
            <p>ff</p>
        </div>
    </div>

    <script>
        const animate = gsap.timeline({ paused: true });
        const animateBackground = new TimelineMax({ paused: true });
        let toggle = true;

        animateBackground
            .to("body", 0.1, { backgroundImage: "none", backgroundColor: "#111" }, 0.2)
            .set(".switch", { boxShadow: "0 0 10px rgba(255, 255, 255, 0.2)" })
            .to(".text p", 0.1, { color: "#FFF" }, 0.2);

        animate
            .to(".toggle-button", 0.2, { scale: 0.7 }, 0)
            .set(".toggle", { backgroundColor: "#FFF" })
            .set(".circle", { display: "none" })
            .to(".moon-mask", 0.2, { translateY: 20, translateX: -10 }, 0.2)
            .to(".toggle-button", 0.2, { translateY: 49 }, 0.2)
            .to(".toggle-button", 0.2, { scale: 0.9 });

        document.getElementsByClassName("switch")[0].addEventListener("click", () => {
            if (toggle) {
                animate.restart();
                animateBackground.restart();
            } else {
                animate.reverse();
                animateBackground.reverse();
            }
            toggle = !toggle;
        });
    </script>
</body>

</html>

Share this file: